<script setup>
    import { ref } from 'vue'
    import { repGetReportService } from '@/api/report'
    import pagination from '@/components/pagination.vue'
    import selectVue from '@/components/select.vue'
    import queryInput from '@/components/queryInput.vue'

    // 表格中的数据
    const tableDate = ref([])
    const reportTable = ref()

    // 获取实验报告的成绩
    const getReport = async() => {
        const { data } = await repGetReportService()
        data.data.forEach(item => {
            if (item.state === 1) {
                tableDate.value.push(item)
            }
        })
        total.value = tableDate.value.length
    }
    getReport()

    // 每页条数
    const pageSize = ref()

    const total = ref()

    // 当前页数
    const currentPage = ref()

    const pageSizes = (obj) => {
        pageSize.value = obj.pageSize.value
        currentPage.value = obj.currentPage.value
    }

    // 表单数据
    const formValue = ref({
        subject: '',
        title: ''
    })
    // 表单校验规则
    const rules = {
        subject: [{ required: true, message: '科目不能为空', trigger: 'blur' }],
        title: [{ required: true, message: '实验名称不能为空', trigger: 'blur' }]
    }

    const form = ref()

    // 成绩和评语
    const resultValue = ref({
        score: '',
        comment: ''
    })

    // 查询按钮
    const queryBtn = async() => {
        await form.value.validate()
        tableDate.value.forEach(item => {
            if (item.subject === formValue.value.subject && item.title === formValue.value.title) {
                resultValue.value.score = item.mark
                resultValue.value.comment = item.comment
            }
        })
    }

    // 下拉菜单
    const queryinput = ref()

    // 重置按钮
    const resetBtn = () => {
        formValue.value = {}
        resultValue.value = {}
        queryinput.value.delInput()
    }

    // 父组件接收子组件的值
    const inputValue = (value) => {
        formValue.value.title = value
    }

    // 行点击事件
const stuHandleClick = (row) => {
    reportTable.value.toggleRowSelection(row)
}

// 点击多个，只显示一个
const stuHandleSelectionChange = (row) => {
    if (row.length > 1) {
        reportTable.value.clearSelection()
        reportTable.value.toggleRowSelection(row.pop())
    }
}

const searchValue = ref()

const searchHandle = (item) => {
    if (item === '搜索') {
        searchFangfa()
    }
    if (item === '重置') {
        searchValue.value = ''
        searchFangfa()
    }
}

// 搜索事件
const searchFangfa = async() => {
    await getReport()
    if (searchValue.value) {
        let res = []
        let flag
        tableDate.value.forEach(items => {
            flag = true
            Object.values(items).forEach(item => {
                if (item && String(item).indexOf(searchValue.value) !== -1 && flag) {
                    flag = false
                    res.push(items)
                }
            })
        })
        tableDate.value = res
        total.value = res.length
    }
}
</script>

<template>
    <div class="achievement">
        <div class="search" style="margin-bottom: 10px;">
            <el-input v-model="searchValue" style="width: 260px; margin-right: 10px;" placeholder="请输入查询条件"></el-input>
            <el-button @click="searchHandle('搜索')" type="primary">搜索</el-button>
            <el-button @click="searchHandle('重置')">重置</el-button>
        </div>
        <el-row>
            <!-- 左边表格 -->
            <el-col :span="14" class="achievement-left">
                <!-- 表格 -->
                <el-table 
                    :data="tableDate.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                    height="530"
                    ref="reportTable"
                    highlight-current-row 
                    border 
                    show-overflow-tooltip
                    @row-click="stuHandleClick"
                    @selection-change="stuHandleSelectionChange" 
                    :row-class-name="rowClassName"
                    
                    >
                    <!-- <el-table-column label="编号" width="80" type="index" index="1"></el-table-column> -->
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column sortable label="科目" prop="subject" width="110" ></el-table-column>
                    <el-table-column label="实验名称" prop="title" width="140" sortable></el-table-column>
                    <el-table-column label="提交时间" prop="date" width="120" sortable></el-table-column>
                    <el-table-column label="成绩" width="100" class-name="mark" sortable label-class-name="mark-title">
                        <template #default="scoped">
                            {{ scoped.row.mark || '暂无成绩' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="教师评语" prop="comment"></el-table-column>
                </el-table>
                
                <!-- 分页 -->
                <div class="pagination">
                <pagination :tableDataTotal="total" @page-sizes="pageSizes" :pageArray="[15, 30, 45, 70]"></pagination>
                </div>
            </el-col>

            <!-- 右边查询 -->
            <el-col :span="10" class="achievement-right">
                <el-form :model="formValue" :rules="rules" label-width="100px" ref="form">
                    <el-form-item label="科目" prop="subject">
                        <selectVue v-model="formValue.subject" style="width: 100%;"></selectVue>
                    </el-form-item>
                    <el-form-item label="实验名称" prop="title">
                        <queryInput ref="queryinput" @input-value="inputValue" :tableDate="tableDate" :subject="formValue.subject" style="width: 100%;"></queryInput>
                    </el-form-item>
                    <el-form-item class="btn-box">
                        <el-button type="primary" @click="queryBtn">查询</el-button>
                        <el-button @click="resetBtn">重置</el-button>
                    </el-form-item>
                </el-form>

                <div class="result">
                    <el-form label-width="90px" :model="resultValue">
                        <el-form-item label="成绩:">
                            <el-input class="grid" v-model="resultValue.score" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="教师评语:">
                            <el-input type="textarea" autosize v-model="resultValue.comment" disabled></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="scss" scoped>
.achievement-left {
    position: relative;
}
    .pagination {
        position: fixed;
        bottom: 3px;
        background-color: #fff;
        z-index: 999;
    }
    .achievement-right {
        padding: 30px 60px;
        .result {
            padding: 30px 0px;
        }
    }
    .btn-box {
        margin-top: 30px;
    }


    ::v-deep .el-table__header .cell {
    text-align: center;
}
::v-deep .el-table__header tr th {
    background-color: #A3D4F5;
    color: #4b4b4b;
}

::v-deep .el-tabs__item {
    font-weight: bold;
}

::v-deep .el-table__header-wrapper .el-table__header .el-checkbox {
    display: none;
}

::v-deep .el-table__body tr.current-row > td.el-table__cell {
background-color: #828cff;
color: #fff;
}
</style>